<!--  -->
<template>
  <div class="cartonControl">
    <span class="dec" @click="desgoods" v-show="count>0"><i class="icon-remove_circle_outline"></i></span>
    <span class="text" v-show="count>0">{{count}}</span>
    <span class="add" @click="addgoods"><i class="icon-add_circle"></i></span>
  </div>
</template>

<script>
export default {
  data () {
    return {
      count: 0
    };
  },
  created () {

  },
  props: {
    food: {
      type: Object
    }
  },
  components: {},

  computed: {},

  mounted: {},

  methods: {
    addgoods () {
      this.count++;
    },
    desgoods () {
      this.count--;
    }
  }
}

</script>
<style lang='less' scoped>
@import '../../common/less/style.less';

.dec,
.add,
{
  padding: 0.06rem;
}
.text{
  padding-top: 0.2rem;
  display: inline-block;
  vertical-align: top;
}
.dec,
.add,
.text
{
  display: inline-block;
  font-size: 0.48rem;
  color: rgb(0,160,220);
}
.cartonControl .text{
  color: rgb(147, 153, 159);
  font-size: 0.2rem;

}
// .text{
//   display: inline-block;
//   height: 0.48rem;
//   text-align: center;
//   color: #cccccc;
//   font-size: 0.2rem;
//   line-height: 0.48rem
// }
</style>
